import { Link } from '@brillout/docpress'

Telefunc can be used in any JavaScript environment without using a transformer but, for improved convenience, we recommend using a transformer plugin if possible.

> Telefunc plugins transform `*.telefunc.js` browser-side imports into a thin HTTP client.


## Without transformer

```ts
// TodoList.ts
// Environment: client

import { defineTelefunction } from 'telefunc/client'
import type { onNewTodo as onNewTodoType } from './TodoList.telefunc.ts'
const onNewTodo = defineTelefunction<typeof onNewTodoType>('TodoList.telefunc.ts', 'onNewTodo')

async function onClick(form) {
  const text = form.input.value
  // Exactly as usual, including TypeScript support
  await onNewTodo({ text })
}
```

> This feature is not implemented yet, reach out on GitHub if you need this.

## Vite plugin

If we use Vite, we can transform `*.telefunc.js` files by using the Telefunc's Vite plugin:

```ts
// vite.config.ts

import { telefunc } from 'telefunc/vite'
import { UserConfig } from 'vite'

export default {
  plugins: [telefunc()]
} satisfies UserConfig
```

## Webpack plugin

If we use webpack, we can transform `*.telefunc.js` files by using the Telefunc's webpack plugin:

```js
// webpack.config.js

module.exports = {
  module: {
    rules: [
     { test: /\.telefunc\./, use: 'telefunc/webpack/loader' }
    ]
  }
}
```

## Babel plugin

Telefunc's Babel plugin is work-in-progress.

> Reach out on GitHub if you want to use the Babel plugin.
